<template>
  <Box1 title="基础信息">
    <dv-border-box7 style="overflow: hidden; height: 100%;">
      <el-scrollbar height="330px">
        <el-descriptions :column="2" border style="background: none; overflow: hidden;">
          <el-descriptions-item :label="item.name + '：'" v-for="item in basic_info" v-bind:key="item"
            label-align="right" label-class-name="label">
            <el-tag type="success">{{ item.val }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="item.name + '：'" v-for="item in basic_info" v-bind:key="item"
            label-align="right" label-class-name="label">
            <el-tag type="success">{{ item.val }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="item.name + '：'" v-for="item in basic_info" v-bind:key="item"
            label-align="right" label-class-name="label">
            <el-tag type="success">{{ item.val }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="item.name + '：'" v-for="item in basic_info" v-bind:key="item"
            label-align="right" label-class-name="label">
            <el-tag type="success">{{ item.val }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="item.name + '：'" v-for="item in basic_info" v-bind:key="item"
            label-align="right" label-class-name="label">
            <el-tag type="success">{{ item.val }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="item.name + '：'" v-for="item in basic_info" v-bind:key="item"
            label-align="right" label-class-name="label">
            <el-tag type="success">{{ item.val }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-scrollbar>
    </dv-border-box7>
  </Box1>
</template>

<script setup>
import Box1 from '@/components/Box1.vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const basic_info = ref([])

onMounted(() => {
  console.log(route.params.id)
  console.log(window.test)
  const id = route.params.id
  fetch('http://localhost:9876/?q=desc tag mcht_infom')
    .then(resp => resp.json())
    .then(resp => {
      console.log(resp)
      basic_info.value = resp.Field.map((field, idx) => ({ key: field, name: resp.Comment[idx] }))
        .filter((item) => item.name && !item.name.startsWith('_'))
      console.log(basic_info)


      fetch('http://localhost:9876/?q=MATCH (v:mcht_infom) where id(v) == "' + id + '" RETURN v')
        .then(resp => resp.json())
        .then(resp => {
          console.log(resp)
          if (resp.v && resp.v[0]) {
            const tag = resp.v[0].tags.mcht_infom
            console.log(tag)
            basic_info.value = basic_info.value.map((item) => {
              console.log(item)
              return {
                ...item,
                val: tag[item.key]
              }
            })
            console.log(basic_info.value)
          }

        })
    })
})
</script>

<style>
.label {
  background-image: -webkit-linear-gradient(top, rgb(219, 222, 248), rgb(172, 176, 188)) !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
}
</style>
